<template>
  <div>
    <el-scrollbar style="height: 100%">
      <el-timeline v-if="datas.length>0">
        <el-timeline-item v-for="(data, index) in datas"
                          :key="index"
                          type='primary'
                          color='#0a6ed2'
                          size='large'
                          :timestamp="data.createon" placement="top">
          <el-card>
            <h4>{{data.title}}</h4>
            <ul style="list-style:none;" >
              <li style="list-style:none;" v-for="(item, index) in data.displayContent" :key="index">
                <p v-if="data.operatetype === 'edit'"><span v-if="item.name" class="operate">修改</span><span class="column"> {{item.name}} </span><span v-if="item.old"> {{item.old}} </span><span v-if="!item.old"> 无 </span><span v-if="item.name" class="arrow"> ==> </span><span v-if="item.new"> {{item.new}}</span><span v-if="!item.new"> 无 </span></p>
                <p v-if="data.operatetype === 'add'"><span class="operate">新增</span><span class="column"> {{item.name}} </span><span v-if="item.old"> {{item.old}}</span><span v-if="item.new"> {{item.new}}</span></p>
                <p v-if="data.operatetype === 'del'"><span class="operate">删除</span><span class="column"> {{item.name}} </span><span v-if="item.old"> {{item.old}}</span><span v-if="item.new"> {{item.new}}</span></p>
              </li>
            </ul>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <p v-else style="text-align:center;font-size:16px;margin:0;height: 50px;margin-top: 10px">
        无变更数据
      </p>
    </el-scrollbar>
  </div>
</template>

<script>
  /** mixins */
  import { mixin_list } from '@tapui/mixins/mixin_list'
  /** 子组件 */
  /** 工具类 */
  import {
    getAction,
    putAction,
    postAction,
    deleteAction
  } from '@tapui/utils/http'
  export default {
    name: 'baseChangeLog',
    mixins: [mixin_list],
    components: {},
    data() {
      return {
        description: '变更记录表-列表查询',
        urlPrefix: '/base/changeLog/',
        url: {
          // queryCodeList: '/base/changeLog/dataCodeList'
          list: '/base/changeLog/queryChangeHistoryLog'
        },
        visible: false,
        isQueryOnCreated: false
      }
    },
    props: {
      title: {
        type: String,
        default: '变更历史'
      },
      sourceId: {
        type: String,
        default: ''
      },
      sourceType: {
        type: String,
        default: ''
      },
      topSourceType: {
        type: String,
        default: ''
      },
      topSourceId: {
        type: String,
        default: ''
      },
      sourceKind: {
        type: String,
        default: ''
      },
      sqlWhere: {
        type: String,
        default: ''
      },
      parentValue: {
        type: String,
        default: ''
      }
    },
    methods: {
      open() {
        this.datas = []
        this.loadData()
      },
      loadData(paramMap) {
        if (!this.url.list) {
          this.$tap.message('请设置list地址!', 'warning')
          return
        }
        // 查询条件
        var params = {}
        if (this.sourceId !== '') {
          params.sourceId = this.sourceId
        }
        if (this.sourceType !== '') {
          params.sourceType = this.sourceType
        }
        if (this.topSourceType !== '') {
          params.topSourceType = this.topSourceType
        }
        if (this.topSourceId !== '') {
          params.topSourceId = this.topSourceId
        }
        if (this.sourceKind !== '') {
          params.sourceKind = this.sourceKind
        }
        if (this.sqlWhere !== '') {
          params.sqlWhere = this.sqlWhere
        }
        if (this.parentValue !== '') {
          params.parentValue = this.parentValue
        }
        // 数据查询
        this.loading = true
        getAction(this.url.list, params)
          .then((res) => {
            if (res.success) {
              this.datas = res.result
              // 初始化自定义列
              if (typeof this.$refs.toolbar !== 'undefined') {
                this.$refs.toolbar.doInitTableColumn()
              }
            } else {
              this.$tap.message(res.message, 'warning')
            }
            this.loading = false
          })
          .catch((err) => {
            this.loading = false
          })
      }
    }
  }
</script>

<style lang="less" scoped>
  /deep/ .el-scrollbar__wrap {
    overflow: scroll;
    height: 100%;
    overflow-x: hidden;
  }
</style>
<style lang="scss">
  .el-timeline{
    padding-left:10px;
    .el-card{
      margin-right:10px;
    }
    .el-card__body{
      padding:0 15px;
      h4{
        margin:15px 0 10px 0;
      }
      ul li{
        line-height: 24px;
        p{
          margin:8px;
        }
      }
      .operate,.arrow{
        color:#bbb;
      }
      .column{
        color:#0a6ed2;
      }
    }
  }
</style>
